<template>
  <div class="dashboard-container">
    <div class="welcome-section">
      <div class="welcome-content">
        <h1>全国高校信息库管理系统</h1>
        <p class="subtitle">Professional University Information Management System</p>
      </div>
      <div class="welcome-bg"></div>
    </div>

    <el-row :gutter="24" class="stats-section">
      <el-col :span="6">
        <div class="stat-card stat-card--blue">
          <div class="stat-icon">
            <i class="el-icon-school"></i>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ summaryData.universityCount }}+</div>
            <div class="stat-label">高校总数</div>
            <div class="stat-trend">
              <i class="el-icon-top"></i>
              <span>8.5%</span>
              <span class="trend-label">较上月</span>
            </div>
          </div>
          <div class="stat-wave"></div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card stat-card--green">
          <div class="stat-icon">
            <i class="el-icon-user"></i>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ summaryData.teacherCount }}+</div>
            <div class="stat-label">教师总数</div>
            <div class="stat-trend">
              <i class="el-icon-top"></i>
              <span>12.3%</span>
              <span class="trend-label">较上月</span>
            </div>
          </div>
          <div class="stat-wave"></div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card stat-card--orange">
          <div class="stat-icon">
            <i class="el-icon-reading"></i>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ summaryData.majorCount }}+</div>
            <div class="stat-label">专业数量</div>
            <div class="stat-trend">
              <i class="el-icon-top"></i>
              <span>5.2%</span>
              <span class="trend-label">较上月</span>
            </div>
          </div>
          <div class="stat-wave"></div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card stat-card--purple">
          <div class="stat-icon">
            <i class="el-icon-data-analysis"></i>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ summaryData.researchCount }}+</div>
            <div class="stat-label">科研项目</div>
            <div class="stat-trend">
              <i class="el-icon-top"></i>
              <span>15.7%</span>
              <span class="trend-label">较上月</span>
            </div>
          </div>
          <div class="stat-wave"></div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="24" class="info-section">
      <el-col :span="24">
        <div class="university-carousel-card">
          <div class="carousel-header">
            <h3>高校基本信息</h3>
            <el-radio-group v-model="carouselType" size="small">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="985">985高校</el-radio-button>
              <el-radio-button label="211">211高校</el-radio-button>
            </el-radio-group>
          </div>
          <el-carousel 
            :interval="4000" 
            type="card" 
            height="400px"
            class="university-carousel"
            v-loading="loading">
            <el-carousel-item v-for="university in displayUniversities" :key="university.id">
              <div class="university-card" v-if="university">
                <div class="university-header">
                  <img :src="university.logo" class="university-logo" alt="校徽" @error="handleLogoError">
                  <div class="university-tags">
                    <el-tag size="small" type="success" v-if="university.schoolNature === '985'">985高校</el-tag>
                    <el-tag size="small" type="warning" v-if="university.schoolNature === '211'">211高校</el-tag>
                    <el-tag size="small" type="info">{{ university.location }}</el-tag>
                  </div>
                </div>
                <h2 class="university-name">{{ university.name }}</h2>
                <div class="university-info">
                  <div class="info-item">
                    <i class="el-icon-date"></i>
                    <span>建校时间：{{ university.foundedYear }}</span>
                  </div>
                  <div class="info-item">
                    <i class="el-icon-location"></i>
                    <span>所在地：{{ university.location }}</span>
                  </div>
                  <div class="info-item">
                    <i class="el-icon-phone"></i>
                    <span>联系电话：{{ university.phone }}</span>
                  </div>
                  <div class="info-item">
                    <i class="el-icon-notebook-2"></i>
                    <span>招生代码：{{ university.admissionCode }}</span>
                  </div>
                  <div class="info-item">
                    <i class="el-icon-medal"></i>
                    <span>学校类型：{{ university.schoolNature || '普通本科' }}</span>
                  </div>
                </div>
                <div class="university-description">
                  <p>{{ university.description }}</p>
                </div>
                <div class="university-footer">
                  <el-button type="primary" size="small" plain @click="handleViewDetail(university)">查看详情</el-button>
                  <el-button type="success" size="small" plain @click="handleViewMajors(university)">专业列表</el-button>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Dashboard",
  data() {
    return {
      summaryData: {
        universityCount: 985,
        teacherCount: 12580,
        majorCount: 287,
        researchCount: 1654,
      },
      carouselType: 'all',
      universities: [],
      loading: false
    };
  },
  computed: {
    displayUniversities() {
      if (this.carouselType === 'all') return this.universities;
      if (this.carouselType === '985') return this.universities.filter(u => u.schoolNature === '985');
      if (this.carouselType === '211') return this.universities.filter(u => u.schoolNature === '211');
      return this.universities;
    }
  },
  created() {
    this.fetchSummaryData();
    this.fetchUniversities();
  },
  methods: {
    async fetchSummaryData() {
      try {
        const res = await this.$axios.get("/dashboard/summary");
        this.summaryData = res.data;
      } catch (error) {
        this.$message.error("获取汇总数据失败");
      }
    },
    async fetchUniversities() {
      try {
        this.loading = true;
        const res = await this.$axios.get("/university/all/list");
        
        console.log('原始接口返回数据:', res);
        
        // 检查响应是否存在
        if (!res || !res.data) {
          throw new Error('接口返回数据为空');
        }

        // 检查数据格式
        const responseData = res.data;
        console.log('响应数据结构:', {
          hasData: !!responseData,
          dataType: typeof responseData,
          isArray: Array.isArray(responseData)
        });

        // 处理数据
        let universityList = [];
        if (Array.isArray(responseData)) {
          // 直接是数组的情况
          universityList = responseData;
        } else if (responseData.data && Array.isArray(responseData.data)) {
          // 包装在 data 字段中的情况
          universityList = responseData.data;
        } else if (responseData.code === 200 && responseData.data) {
          // 标准响应格式的情况
          universityList = Array.isArray(responseData.data) ? responseData.data : [responseData.data];
        } else {
          throw new Error('无法解析的数据格式');
        }

        console.log('解析后的高校列表:', universityList);

        // 过滤和转换数据
        const validUniversities = universityList
          .filter(item => item && item.id && item.id > 0)
          .map(item => ({
            id: item.id,
            name: item.name || '未知高校',
            logo: item.logo || 'https://img.icons8.com/color/96/000000/university.png',
            schoolNature: item.schoolNature || '普通本科',
            location: item.address || '地址未知',
            foundedYear: item.establishedYear ? `${item.establishedYear}年` : '成立时间未知',
            phone: item.phone || '暂无',
            admissionCode: item.admissionCode || '暂无',
            description: this.generateDescription(item)
          }));

        console.log('处理后的有效数据:', validUniversities);

        if (validUniversities.length === 0) {
          this.$message.warning('未找到有效的高校数据');
        }

        this.universities = validUniversities;
        
        // 更新统计数据
        this.summaryData = {
          ...this.summaryData,
          universityCount: validUniversities.length
        };

      } catch (error) {
        console.error('获取高校列表失败:', error);
        this.$message.error(`获取高校列表失败: ${error.message}`);
      } finally {
        this.loading = false;
      }
    },
    generateDescription(university) {
      let description = `${university.name}创建于${university.establishedYear}年，位于${university.address}。`;
      
      if (university.schoolNature === '985') {
        description += '作为985工程重点建设高校，';
      } else if (university.schoolNature === '211') {
        description += '作为211工程重点建设高校，';
      }
      
      description += '学校秉承优良传统，致力于培养具有创新精神和实践能力的高素质人才。';
      
      return description;
    },
    handleLogoError(e) {
      e.target.src = 'https://img.icons8.com/color/96/000000/university.png';
    },
    handleViewDetail(university) {
      // 查看详情的处理逻辑
      this.$message.info(`查看${university.name}的详细信息`);
    },
    handleViewMajors(university) {
      // 查看专业列表的处理逻辑
      this.$message.info(`查看${university.name}的专业列表`);
    }
  },
};
</script>

<style scoped>
.dashboard-container {
  padding: 24px;
  background: #f0f2f5;
  min-height: 100vh;
}

.welcome-section {
  position: relative;
  height: 180px;
  background: linear-gradient(135deg, #1890ff, #36cfc9);
  border-radius: 12px;
  margin-bottom: 24px;
  overflow: hidden;
}

.welcome-content {
  position: relative;
  z-index: 2;
  padding: 32px;
  color: #fff;
}

.welcome-content h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 8px;
}

.subtitle {
  font-size: 16px;
  opacity: 0.8;
}

.welcome-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url('') repeat;
  opacity: 0.1;
}

.stats-section {
  margin-bottom: 24px;
}

.stat-card {
  position: relative;
  padding: 24px;
  border-radius: 12px;
  height: 160px;
  overflow: hidden;
  color: #fff;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-card--blue {
  background: linear-gradient(135deg, #1890ff, #36cfc9);
}

.stat-card--green {
  background: linear-gradient(135deg, #52c41a, #73d13d);
}

.stat-card--orange {
  background: linear-gradient(135deg, #fa8c16, #ffd591);
}

.stat-card--purple {
  background: linear-gradient(135deg, #722ed1, #b37feb);
}

.stat-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.stat-content {
  position: relative;
  z-index: 1;
}

.stat-value {
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 16px;
  opacity: 0.8;
}

.stat-trend {
  margin-top: 16px;
  font-size: 14px;
}

.stat-trend i {
  margin-right: 4px;
}

.trend-label {
  margin-left: 8px;
  opacity: 0.8;
}

.stat-wave {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: url('') no-repeat;
  background-size: cover;
  opacity: 0.1;
}

.university-carousel-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.carousel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.carousel-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.university-carousel {
  margin: 20px 0;
}

.university-card {
  height: 100%;
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
}

.university-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.university-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 50%;
  border: 2px solid #f0f2f5;
  padding: 4px;
  background: #fff;
}

.university-tags {
  display: flex;
  gap: 8px;
}

.university-name {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0 0 20px 0;
}

.university-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  padding: 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.info-item:hover {
  background: #f5f7fa;
}

.info-item i {
  color: #409EFF;
  font-size: 18px;
}

.university-description {
  flex: 1;
  margin: 20px 0;
  color: #666;
  line-height: 1.6;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #409EFF;
}

.university-description p {
  margin: 0;
}

.university-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: auto;
}

.el-carousel__item {
  border-radius: 8px;
}

.el-carousel__item:hover {
  transform: scale(1.02);
  transition: all 0.3s ease;
}

.el-carousel__item.is-active {
  transform: scale(1.05);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.university-card {
  animation: slideIn 0.5s ease-out forwards;
}

.el-carousel__item.is-active .university-card {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
</style>
